<template>
  <PageMain title="沟通记录" is-back :body-style="{ padding: 0 }">
    <div class="form-content f-c j-b">
      <div class="chat-list f-g f-c">
        <div class="chat-date">{{ query.createTime }}</div>
        <div class="chat-record" v-for="item in chatList" :key="item.id">
          <div class="chat-left f-r" v-if="item.role === 0">
            <div class="chat-avatar f-s">
              <el-image style="width: 25px;height: 25px" :src="query.avatar || defaultAvatar"></el-image>
            </div>
            <div class="chat-content">
              <div class="chat-name">{{ query.nick}}</div>
              <div class="chat-message">{{ item.content }}</div>
            </div>
          </div>
          <div class="chat-right f-r j-e" v-if="item.role === 1">
            <div class="chat-content">
              <div class="chat-message">{{ item.content }}</div>
            </div>
            <div class="chat-avatar f-s">
              <el-image style="width: 25px" :src="ServerAvatar"></el-image>
            </div>
          </div>
        </div>
      </div>
    </div>
  </PageMain>
</template>
<script setup>
import ServerAvatar from '@/assets/server_avatar.png'
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import {dayjs, ElMessage} from "element-plus";
import { http } from "@/api";
import defaultAvatar from '@/assets/default_avatar.png'

const router = useRouter()
const route = useRoute()
const id = route.params.id
const query = route.query
const datetime = dayjs().format('YYYY-MM-DD HH:mm:ss')
const chatList = ref()
const getMessage = () => {
  http.Server.read({
    id,
  }).then(res => {
    chatList.value = res.data
  })
}
getMessage()
</script>
<style lang="scss">
.form-footer {
  flex-shrink: 0;
  padding: 30px 20px;
  padding-bottom: 50px;
  .el-textarea__inner {
    background: #F3F3F3;
  }
  border-top: 1px solid var(--el-card-border-color);
}
.chat-list {
  overflow: auto;
  padding: 20px 50px;
  .chat-record {
    margin-top: 40px;
    .chat-name {
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: normal;
      line-height: 25px;
      display: flex;
      align-items: center;
      color: #A1A6AF;
      margin-bottom: 8px;
    }
    .chat-message {
      min-width: 200px;
      max-width: 500px;
      border-radius: 8px;
      background: #F3F3F3;
      padding: 10px 20px;
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: normal;
      line-height: 24px;
      display: flex;
      align-items: center;
      color: #333333;
    }
    .chat-left {
      .chat-avatar {
        margin-right: 10px;
      }
    }
    .chat-right {
      .chat-avatar {
        margin-left: 10px;
      }
      .chat-message {
        background: #D0E9FF;
      }
    }
  }
  .chat-date {
    color: #A1A6AF;
    font-size: 14px;
    text-align: center;
    line-height: 14px;
  }
}
</style>
